<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节点创建</title>
    <style>
        .active{
            background-color: #faa;

        }
    </style>
</head>
<body>
    <div class="box" data-msg="hello" data-word='wrold'>一个盒子</div>
    <div class="mid">mid</div>
    <ul>
        <li>
            <span>项目1</span> 
            <button class="delete" data-id="1">删除</button>
        </li>
        <li>
            <span>项目2</span> 
            <button class="delete" data-id="2">删除</button>
        </li>
        <li>
            <span>项目3</span> 
            <button class="delete" data-id="3">删除</button>
        </li>
        <li>
            <span>项目4</span> 
            <button class="delete" data-id="4">删除</button>
        </li>
    </ul>
    <script>
        var box = document.querySelector('.box')
        var deleteBtns = document.querySelectorAll('.delete')
        //创建a标签
        var el = document.createElement('a')
        //给元素设置属性
        el.setAttribute('href','https://baidu.com')
        //通过设置对象的键的方式设置元素的属性
        el.href = 'https://sina.com'
        //className -> class
        el.className = 'link'
        el.setAttribute('target','_blank')
        //删除元素属性
        // el.removeAttribute('target')
        //获取元素的属性
        console.log(el.getAttribute('href'))
        //设置自定义属性
        el.dataset.msg = 'world'
        el.dataset.ok = 'good'
        // 获取自定属性的对象
        el.dataset
        // el.innerText = '百度'
        //el.innerText = "<span>百度</span>"
        el.innerHTML = "<span>百度</span>"
        //设置元素的内联样式，也就是style属性
        el.style.color = 'red'
        //需要把css属性转换成小驼峰的形式
        el.style.backgroundColor = 'blue'
        //统一赋值
        // el.style.cssText = "color:orange;font-style:italic;letter-spacing:8px;";
        // el.style = "color:orange;font-style:italic;letter-spacing:8px;";
        el.setAttribute('style',"color:orange;font-style:italic;letter-spacing:8px;")

        // 查询到body元素
        var body = document.body
        //把el放入到body里面的最后面
        // body.appendChild(el)
        //把el放入到body里面的最前面
        body.prepend(el)
    </script>
</body>
</html>